<script>
import { Plus } from '@element-plus/icons-vue'
import { addBanner } from '@/api/banner'
export default {
    name: 'addBanner',
    data() {
        return {
            imageUrl: '',
            formData: {
                img: '',
                alt: '',
                link: ''
            }
        }
    },
    methods: {
        httpRequest(option) {
            console.log(option.file);

            // 判断选择的内容是不是一张图片
            if (option.file.type.indexOf('image') == -1) {
                ElMessage.error('请选择正确图片文件')
                return
            }

            // 将选择的图片显示出来，可以有两种方法
            // 1. 将通过图片文件创建一个临时的 URL 地址进行使用
            // createObjectURL 用来通过文件生成临时地址用的
            // this.imageUrl = URL.createObjectURL(option.file)

            // 2. 将图片文件转换成 base64 的格式进行使用
            // 创建一个文件的加载器
            let reader = new FileReader()
            // 将文件读取成 base64 格式
            reader.readAsDataURL(option.file)
            reader.onload = () => {
                // 文件读取成 base64 成功之后的回调函数
                this.imageUrl = reader.result

                // 记录数据，需要发送给后端
                this.formData.img = reader.result
            }
        },
        addBannerClick() {
            // 收集需要发送给后端的数据
            console.log(this.formData);
            /*
                上传图片通常会有两个方法：
                通常使用第一种
                1. 将图片作为文件直接传递给文件存储的服务器，文件服务器会给前端返回一个图片地址
                前端将图片地方发送给组件服务器做保留。(七牛)

                2. 将图片转换成 base64 直接发送给自己服务器做存储，如果图片多，会导致服务器存储
                空间受到影响，所以一般情况下不推荐使用这个方法。
            */


            addBanner(this.formData).then(res => {
                if (res.code == 200) {
                    // 成功
                    // 清除表单数据
                    this.formData = {
                        alt: '',
                        link: '',
                        img: ''
                    }
                    this.imageUrl = ''

                    // 跳转到轮播图列表页面
                    this.$router.push('/banner/bannerList')
                } else {
                    // 失败
                    ElMessage.error('温馨提示：' + '文件上传失败，请检查网络后重新上传!')
                }
            })

        }
    },
    components: {
        Plus
    }
}
</script>
<template>
    <h2>添加轮播图</h2>
    <div class="box">
        <el-input v-model="formData.alt" placeholder="请输入 alt" />
        <el-input v-model="formData.link" class="link" placeholder="请输入 link" />

        <el-upload :http-request="httpRequest" class="avatar-uploader" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>

        <el-button @click="addBannerClick">添加</el-button>

    </div>
</template>
<style scoped>
.box {
    width: 500px;
}

.el-button {
    margin-top: 20px;
}

.link {
    margin: 20px 0;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>